<template>
  <iframe
    v-if="pdfFlag"
    :src="fileViewSrc"
    width="100%"
    height="100%"
    class="file-preview-iframe well w-100"
    id="filePreviewIframe"
    ref="filePreviewIframeRef"
  ></iframe>
  <div id="imgPreviewIframe" v-else ref="imgPreviewIframeRef" style="height: 100%; display: block; margin: 0 auto;">
    <img ref="imgViewerContainerRef" id="imgViewerContainer" src="" style="width: auto; height: 100%; margin: 0 auto; display: flex">
  </div>
</template>

<script>

export default {
  name: "FilePreview",
  data() {
    return {
      pdfFlag: true,
      fileType: "",
      fileViewSrc: "",
      imgArray: ["jpg","png","jpeg"]
    }
  },
  computed: {

  },
  methods: {
    async filePreviewPath(type, url) {
      this.pdfFlag = (type == "pdf");
      if (type === "pdf") { // PDF类型文件
        this.fileViewSrc = "/pdfjs-2.14.305-legacy/web/viewer.html?file=" + url;
      } else if (this.imgArray.indexOf(type) !== -1) {
        this.$nextTick(() => {
          document.getElementById("imgViewerContainer").src=url;
        })
      }
    },
    showFilePreview(type, url) {
      this.filePreviewPath(type, url);
    }
  }

};
</script>

<style lang="scss" scoped>
.file-preview-iframe {
  border: none;
}
::v-deep img{
  width: 100%;
}
</style>
